import { h, ref } from '../../lib/guide-coco-mini-vue.esm.js'

export const App = {
    name: "App",
    setup() {
        const count = ref(1);

        const onClick = () => {
            count.value++;
        };
        
        return {
            count,
            onClick
        }
    },
    render() {
        return h('div', { id: 'root' },
            [
                // 依赖收集逻辑：
                // 1.当 setup 之后，进入 setupRenderEffect 函数时，此时会创建一个 effect，并且这个 effect 会
                // 是 activeEffect 状态。
                // 2.在 effect 中进行 call render()函数时，会访问到 this.count，从而让count 修改时候会调用到这个 activeEffect 
                // 3. 当触发 onClick 时，count 的数值变动，触发 effect， 此时触发 effect 由于 instance.isMounted = false, 所以走更新逻辑
                // 获取到 prevSubTree 和 当前 subTree ，重新调用 patch 方法。 
                // 4. patch 方法流转到  processElement -> 最后 通过 n1 是否存在数据判断是否为更新操作
                // 5. n1 包含数据，则代表更新，执行 patchElement 函数，做更新操作！
                h('div', {}, "count:" + this.count), // 依赖收集
                h('button', { onClick: this.onClick }, '点击+1')
            ])
    }
}
